$(function () {
  // 1,首先当按下回车键的时候会输出数据
  $("#title").on("keydown", function (e) {
    //    判断当按下的键是回车的时候,并且input 里面有数据
    if (e.keyCode === 13) {
        var value = $(this).val().trim()
      if ( value === "") {
        return alert("请重新输入");
      }
      //  准备一个对象来存储数据
      var obj = {
        title: value,
        done: false
      };
      var data = getData();
      // 此时将获取的 obj 加入本地存储
    data.unshift(obj);
      setData(data);
      render()
    }
  });
  // 创建一个函数获取本地数据
function getData() {
    
  }
  // 再创建一个函数更新本地存储
  function setData(data) {
    localStorage.setItem("todo", JSON.stringify(data));
  }
  
//   定义一个函数把数据渲染到页面
function render(){
    // 首先获取本地数据
    var data = getData();
   var ol = '';
   var ul = ''
   $.each(data,function(i, n){
    if(n.done){
        ul += 
        `
        <li>
        <input type = "checkbox"  checked>
        <p> ${n.title}</p>
        <a href = "javascript:;" index = ${i}> </a>
        </li>
        `
    }
    else{
        ol += 
        `
        <li>
        <input type = "checkbox" >
        <p> ${n.title}</p>
        <a href = "javascript:;" index = ${i}> </a>
        </li>
        `
    }
     
   })

   $("ol").html(ol)
   $("ul").html(ul)
   
}
render();
//    点击checked 切换 ul 和 ol

$("ol , ul ").on('click',"input",function(){
    // 先获取本地数据
    var data = getData();  
    // 利用 a的自定义属性 来获取 input 的索引
   var index = $(this).siblings("a").attr('index'); 
//    当前本地数据的索引的自定义属性
data[index].done = $(this).prop("checked");
//    然后再更新本地数据
setData(data);
//    然后再渲染
render()
    
})
// 继续用 ol 和 ul 来给 a 做点击事件
$("ol , ul").on("click","a",function(){
    if(confirm('是否需要删除')){
        // 获取本地数据
        var data = getData();
        // 删除 当前 a 的父元素
        data.splice($(this).attr('index'),1)
        // 获取本地数据,同时渲染页面
        setData(data)
        render()

    }
})
});
